<template>
  <div class="content">
    <p class="title font-16-B">资源消耗明细</p>
    <p class="content-label font-14">资源消耗情况</p>
    <div class="list">
      <div class="flex">
        <p class="font-12">账号名</p>
        <p class="font-12">解锁频道数量</p>
        <p class="font-12">邮件发送数量</p>
      </div>
      <div class="flex">
        <p class="font-12">主账号：{{ info.name }}</p>
        <p class="font-12">{{ info.count }}个</p>
        <p class="font-12">{{ info.count }}封</p>
      </div>
      <div class="flex">
        <p class="font-12">总计数量</p>
        <p class="font-12">{{ info.count }}个</p>
        <p class="font-12">{{ info.count }}封</p>
      </div>
      <div class="flex">
        <p class="font-12">剩余数量</p>
        <p class="font-12">{{ info.count }}个</p>
        <p class="font-12">{{ info.count }}封</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const info = ref({
  name: 'xxxxxx',
  count: 1111
});
</script>

<style lang="less" scoped>
.content {
  padding: 20px 32px 24px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);

  .title {
    color: #333;
    margin-bottom: 24px;
  }

  .content-label {
    line-height: 20px;
    color: #666;
    margin-bottom: 14px;
  }

  .list {
    border: 1px solid #e5e7eb;

    div {
      border-bottom: 1px solid #e5e7eb;

      &:last-child {
        border-bottom: none;
      }

      p {
        flex: 1;
        border-left: 1px solid #e5e7eb;
        height: 32px;
        line-height: 32px;
        color: #666;
        padding-left: 32px;

        &:nth-child(1) {
          border-left: none;
        }
      }
    }
  }
}
</style>
